<template>
  <div class="container-fluid wraper">
    <!--<h1 class="title">Vue3组件间通信</h1>-->
    <hr>
    <div class="row btn-group">
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/props" style="text-decoration: none;color: black; white-space: nowrap;">1.props</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/event" style="text-decoration: none;color: black; white-space: nowrap;">2.自定义事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/mitt" style="text-decoration: none;color: black; white-space: nowrap;">3.mitt事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/mittts" style="text-decoration: none;color: black; white-space: nowrap;">4.mittTs事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/model" style="text-decoration: none;color: black; white-space: nowrap;">5.Vmodel事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/attrs" style="text-decoration: none;color: black; white-space: nowrap;">6.attrs事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/refs" style="text-decoration: none;color: black; white-space: nowrap;">7.refs-parent事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/slot" style="text-decoration: none;color: black; white-space: nowrap;">8.slot事件</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/slotdemo2" style="text-decoration: none;color: black; white-space: nowrap;">8.slot具名插槽</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/slotdemo3" style="text-decoration: none;color: black; white-space: nowrap;">09_slot_作用域插槽</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/slotdemo4" style="text-decoration: none;color: black; white-space: nowrap;">09_slot_默认插槽</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="#" style="text-decoration: none;color: black; white-space: nowrap;">第六章-组件通信学习</router-link>
        </button>
      </div>
    </div>
    <hr>

    <!--第二行组件信息-->
    <div class="row btn-group">
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/indexdemo1" style="text-decoration: none;color: black; white-space: nowrap;">1.路由的基本切换模式</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/indexdemo2" style="text-decoration: none;color: black; white-space: nowrap;">2.路由两个注意点</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/indexdemo3" style="text-decoration: none;color: black; white-space: nowrap;">3.路由query参数传参</router-link>
        </button>
      </div>

      <div class="col">
        <button type="button" class="btn btn-primary">
          <router-link to="/slotdemo2" style="text-decoration: none;color: black; white-space: nowrap;">4.占据位置</router-link>
        </button>
      </div>
      <div class="col">
        <button type="button" class="btn btn-warning">
          <router-link to="#" style="text-decoration: none;color: black; white-space: nowrap;">第四章-路由知识学习</router-link>
        </button>
      </div>
    </div>
    <hr>

    <!--第三行组件信息-->
    <div class="row btn-group d-flex justify-content-start">
      <div class="col-auto">
        <button type="button" class="btn btn-warning">
          <router-link to="#" style="text-decoration: none;color: black; white-space: nowrap;">第三章-Vue3核心语法的学习</router-link>
        </button>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-warning">
          <router-link to="/vue3codePerson" style="text-decoration: none;color: black; white-space: nowrap;">ref响应式数据</router-link>
        </button>
      </div>

      <div class="col-auto">
        <button type="button" class="btn btn-warning">
          <router-link to="/vue3codeWatch" style="text-decoration: none;color: black; white-space: nowrap;">watch的情况</router-link>
        </button>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-warning">
          <router-link to="/vue3codeProps" style="text-decoration: none;color: black; white-space: nowrap;">props及生命周期</router-link>
        </button>
      </div>
    <hr>
      <!--开始pinia知识的学习-->
      <div class="row btn-group d-flex justify-content-start">
        <div class="col-auto">
          <button type="button" class="btn btn-warning">
            <router-link to="/appdemo36" style="text-decoration: none;color: black; white-space: nowrap;">准备一个效果</router-link>
          </button>
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-warning">
            <router-link to="/appdemo38" style="text-decoration: none;color: black; white-space: nowrap;">存储加读取效果</router-link>
          </button>
        </div>
      </div>
      <!--结束pinia知识的学习-->
      <!--开始elementplus知识的学习-->
      <div class="row btn-group d-flex justify-content-start">
      </div>
      <!--结束elementplus知识的学习-->
      <!--开始boostrap5知识的学习-->
      <div class="row btn-group d-flex justify-content-start">
      </div>
      <!--结束boostrap5知识的学习-->
    </div>
      <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
        <div class="panel-body">
          <!-- 路由视图区 占位一个展示区-->
          <!--
            panel-body：这是 Bootstrap 中用于面板的类，通常用于面板的内容区域。
            尽管在 Bootstrap 4 中已不再使用面板（Panel）组件，但这个类在旧版本中用于包裹内容。
          -->
          <router-view></router-view>
        </div>
      </div>
    </div>
</template>
<script lang="ts" setup name="App">
</script>
<style scoped>
.wraper .title {
  padding: 20px;
  text-align: center;
  min-width: 610px;
  background-color: skyblue;
}
.wraper .small {
  font-size: 15px;
}

.wraper .list-group-item {
  min-width: 230px;
}
</style>